{% extends 'userCenterTemplate.html' %}

{% load staticfiles %}

{% block customJs %}
<script type="text/javascript" src="{% static '/js/util/myUtil.js' %}"></script>
<script type="text/javascript" src="{% static '/js/plugins/laydate/laydate.js' %}"></script>
{% endblock %}

{% block title %}个人中心 - 慕学在线网{% endblock %}

{% block userCenterTag %}个人资料{% endblock %}

{% block right %}
<div class="right">
    <div class="personal_des ">
        <div class="head" style="border:1px solid #eaeaea;">
            <h1>个人资料</h1>
        </div>
        <div class="inforcon">
            <div class="left" style="width:242px;">
                <iframe id='frameFile' name='frameFile' style='display:none;'></iframe>
                <form enctype="multipart/form-data" method="post" action="{% url 'users:userModifyImage' %}" target='frameFile' class="clearfix" id="jsAvatarForm" autocomplete="off">
                {% csrf_token %}
                    <label class="changearea" for="avatarUp">
                        <span id="avatardiv" class="pic">
                            <img width="100" height="100" class="js-img-show" id="avatarShow"
                                 src="{{ MEDIA_URL }}{{ request.user.image }}"/>
                        </span>
                        <span class="fl upload-inp-box" style="margin-left:70px;">
                            <span class="button btn-green btn-w100" id="jsAvatarBtn">修改头像</span>
                            <input type="file" name="image" id="avatarUp" class="js-img-up"/>
                        </span>
                    </label>
                </form>
                <div style="border-top:1px solid #eaeaea;margin-top:30px;">
                    <a class="button btn-green btn-w100" id="jsUserResetPwd" style="margin:80px auto;width:100px;">修改密码</a>
                </div>
            </div>
            <form class="perinform" id="jsEditUserForm" autocomplete="off">
                <ul class="right">
                    <li>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称&nbsp;：
                       <input type="text" name="nickName" id="nickName" value="{{ request.user.nickName }}" maxlength="10">
                        <i class="error-tips"></i>
                    </li>
                    <li>生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日：
                       <input type="text" id="birthday" name="birthday" value="{% if request.user.birthday%}{{ request.user.birthday|date:'c' }}{% endif %}" readonly="readonly" onclick="laydate({format: 'YYYY-MM-DD', elem: '#birthday', max: laydate.now()});"/>
                        <i class="error-tips"></i>
                    </li>
                    <li>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
                        <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio"  name="sex" value="male" {% ifequal request.user.sex "male" %}checked="checked"{% endifequal %}>男
                        </label>
                        <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="sex" value="female" {% ifequal request.user.sex "female" %}checked="checked"{% endifequal %}>女
                        </label>
                    </li>
                    <li class="p_infor_city">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：
                        <input type="text" name="address" id="address" placeholder="请输入你的地址" value="{{ request.user.address }}" maxlength="10">
                        <i class="error-tips"></i>
                    </li>
                    <li>手&nbsp;&nbsp;机&nbsp;&nbsp;号：
                        <input type="text" name="mobilePhone" id="mobilePhone" placeholder="请输入你的手机号码" value="{% if request.user.mobilePhone%}{{ request.user.mobilePhone }}{% endif %}" maxlength="11">
                    </li>
                    <li>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：
                        <input class="borderno" type="text" name="email" readonly="readonly" value="{% if request.user.email%}{{ request.user.email }}{% endif %}"/>
                        <span class="green changeemai_btn">[修改]</span>
                    </li>
                    <li class="button heibtn">
                        <input type="button" id="jsEditUserBtn" value="保存">
                    </li>
                </ul>
            </form>
        </div>
    </div>
</div>

<div class="dialog" id="jsDialog">
    <script>
    $(function(){
        //个人中心修改头像
        $('.js-img-up').uploadPreview({Img: ".js-img-show", Width: 94, Height: 94 ,Callback:function(){
            $('#jsAvatarForm').submit();
        }});
        //个人中心修改密码
        $('#jsUserResetPwd').on('click', function(){
            Dml.fun.showDialog('#jsResetDialog','#jsResetPwdTips');
        })
        $('#jsResetPwdBtn').on("click",function(){
            var pwd = $("#pwd").val()
            var repwd = $("#repwd").val()
            if(pwd == repwd){
                if(!/^[a-z][a-z0-9_-]{7,14}$/.test(pwd)){
                    alert("密码输入有误！")
                    return
                }
            }else{
                alert("密码输入不一致！")
                return
            }
            $.ajax({
                cache: false,
                async: true,
                type: "POST",
                url: "{% url 'users:userModifyPassword' %}",
                data: $('#jsResetPwdForm').serialize(),
                beforeSend:function(xhr,settings){
                    xhr.setRequestHeader("X-CSRFToken","{{ csrf_token }}");
                },
                success:function(data){
                    if(data && data.status == "success"){
                        alert("修改成功")
                        Dml.fun.winReload();
                    }
                    else{
                        alert("密码格式不正确或者两次输入密码不一致！")
                    }
                },error:function(a,b,c){alert("系统繁忙,稍后重试")}
            })
        })
        //个人中心修改邮箱发送验证码
        $("#jsChangeEmailCodeBtn").on("click",function(){
            if($.lixing.checkEmail($("#jsChangeEmail").val())){
                $.ajax({
                    cache: false,
                    async: true,
                    type: "POST",
                    url: "{% url 'users:sendEmailCode' %}",
                    data: $('#jsChangeEmailForm').serialize(),
                    beforeSend:function(xhr,settings){
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success:function(data){
                        if(data.status == "success"){
                            alert("请到指定邮箱获取验证码")
                        }else if(data.status == "inputFail"){
                            alert("邮箱格式输入有误")
                        }else{
                            alert("该邮箱已被使用")
                        }
                    },error:function(a,b,c){alert("系统繁忙,稍后重试")}
                })
            }else{
                alert("邮箱格式输入有误！")
            }
        })
        //个人中心修改邮箱
        $("#jsChangeEmailBtn").on("click",function(){
            if($.lixing.checkEmail($("#jsChangeEmail").val())){
                $.ajax({
                    cache: false,
                    async: true,
                    type: "POST",
                    url: "{% url 'users:userModifyEmail' %}",
                    data: $('#jsChangeEmailForm').serialize(),
                    beforeSend:function(xhr,settings){
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success:function(data){
                        if(data.status == "success"){
                            alert("修改成功")
                            Dml.fun.winReload();
                        }else{
                            alert("验证码输入错误")
                        }
                    },error:function(a,b,c){alert("系统繁忙,稍后重试")}
                })
            }
        })
        //个人中心保存用户信息
        $("#jsEditUserBtn").on("click",function(){
            var nickName = $("#nickName").val()
            var birthday = $("#birthday").val()
            var address = $("#address").val()
            var mobilePhone = $("#mobilePhone").val()

            if(nickName == "" || nickName == undefined){ alert("昵称不能为空");return }
            if(birthday == "" || birthday == undefined){ alert("出生日期不能为空");return }
            if(address == "" || address == undefined){ alert("地址不能为空");return }
            if(!$.lixing.checkMobilePhone(mobilePhone)){
                alert("手机号码输入有误")
                return
            }

            $.ajax({
                cache: false,
                async: true,
                type: "POST",
                url: "{% url 'users:userModifyInfo' %}",
                data: $('#jsEditUserForm').serialize(),
                beforeSend:function(xhr, settings){
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success:function(data){
                    if(data.status == "success"){
                        alert("保存成功")
                    }else{
                        alert("保存失败，请检查输入是否有误")
                    }
                },error:function(a,b,c){alert("系统繁忙,稍后重试")}
            })
        })
    })
    </script>
    <div class="dialogbox resetpwdbox" id="jsResetDialog">
        <h1>修改密码</h1>
        <div class="close jsCloseDialog">
            <img src="{% static '/images/dig_close.png' %}"/>
        </div>
        <div class="cont">
            <form id="jsResetPwdForm" autocomplete="off">
                {% csrf_token %}
                <div class="box">
                    <span class="word2" >新&nbsp;&nbsp;密&nbsp;&nbsp;码</span>
                    <input type="password" id="pwd" name="password" placeholder="8-15位非中文字符"/>
                </div>
                <div class="box">
                    <span class="word2" >确定密码</span>
                    <input type="password" id="repwd" name="nickName" placeholder="8-15位非中文字符"/>
                </div>
                <div class="error btns" id="jsResetPwdTips"></div>
                <div class="button">
                    <input id="jsResetPwdBtn" type="button" value="提交" />
                </div>
            </form>
        </div>
    </div>
    <div class="dialogbox changeemai1 changephone" id="jsChangeEmailDialog">
        <h1>修改邮箱</h1>
        <div class="close jsCloseDialog">
            <img src="{% static '/images/dig_close.png' %}"/>
        </div>
        <p>请输入新的邮箱地址</p>
        <form method="post" action="" id="jsChangeEmailForm" autocomplete="off">
            {% csrf_token %}
            <div class="box">
                <input class="fl change_email" name="email" id="jsChangeEmail" type="text" placeholder="输入重新绑定的邮箱地址">
            </div>
            <div class="box">
                <input class="fl email_code" type="text" id="jsChangeEmailCode" name="code" placeholder="输入邮箱验证码">
                <input class="getcode getting" type="button" id="jsChangeEmailCodeBtn" value="获取验证码">
            </div>
{#            <div class="error btns change_email_tips" id="jsChangeEmailTips" >请输入...</div>#}
            <div class="button">
                <input class="changeemai_btn" id="jsChangeEmailBtn" type="button" value="完成"/>
            </div>
        </form>
    </div>
</div>
<div class="bg" id="dialogBg"></div>

{% endblock %}



